<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="base/resource"/>
    <title>离线调度实例 - Big Whale</title>
    <link href="../libs/bootstrap-treeview/bootstrap-treeview.min.css" rel="stylesheet"/>
    <link href="../libs/fonts/script-type/script-type.css" rel="stylesheet">
    <link href="../css/common.css" rel="stylesheet"/>
    <link href="../css/schedule_instance.css" rel="stylesheet">
</head>
<body ng-app="content-app" ng-controller="content-controller">
<div class="container-fluid animated fadeInDown">
    <div class="bw-nav">
        <div class="row">
            <ol class="breadcrumb">
                <li><a href="javascript:" ng-click="onOpenList()">离线调度</a></li>
                <li class="active">实例</li>
            </ol>
            <a class="bw-refresh" onclick="location.reload()" title="刷新">
                <i class="fa fa-refresh" style="font-size: 18px"></i>
            </a>
        </div>
    </div>
    <div class="bw-body">
        <div class="row">
            <div class="col-md-2">
                <form class="instance-form">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="实例ID" ng-model="query.instance" ng-change="search()">
                    </div>
                </form>
                <div class="instance-list">
                    <ul class="list-group">
                        <a href="javascript:" class="list-group-item"
                           ng-repeat="item in instancePage.content" ng-click="treeView(item)"
                           ng-class="instance === item ? 'active': ''">{{item}}</a>
                    </ul>
                </div>
                <nav aria-label="...">
                    <ul class="pager">
                        <li class="previous" ng-class="instancePage.first ? 'disabled' : ''" ng-click="previous()"><a href="#">Previous</a></li>
                        <li class="next" ng-class="instancePage.last ? 'disabled' : ''" ng-click="next()"><a href="#">Next</a></li>
                    </ul>
                </nav>
            </div>
            <div class="col-md-9">
                <div class="instance-tree">
                    <div class="state">
                        <span class="label label-default">UN_CONFIRMED_</span>
                        <span class="label label-warning">TIME_WAIT_</span>
                        <span class="label label-info">RUNNING_</span>
                        <span class="label label-success">SUCCEEDED_</span>
                        <span class="label label-danger">FAILED_</span>
                    </div>
                    <div id="tree"></div>
                    <a class="refresh" ng-if="instance" ng-click="onAutoRefresh()">
                        <img src="../img/loading.gif" ng-if="autoRefresh.enabled" /> {{autoRefresh.enabled ? '关闭自动刷新' : '自动刷新'}}
                    </a>
                </div>
            </div>
            <div class="col-md-1">
                <div class="instance-operate">
                    <button id="log" type="button" class="btn btn-primary" disabled="disabled" ng-click="onOpenLog()">日志</button>
                    <button id="rerun" type="button" class="btn btn-primary" disabled="disabled" ng-click="onRerun()">重跑</button>
                    <button id="empty" type="button" class="btn btn-primary" disabled="disabled" ng-click="onEmpty()">置成功</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../libs/bootstrap-treeview/bootstrap-treeview.min.js" type="text/javascript"></script>
<script src="../libs/angular-1.3.9/angular.min.js" type="text/javascript"></script>
<script src="../libs/angular-1.3.9/myangular.js" type="text/javascript"></script>
<script src="../js/common.js" type="text/javascript"></script>
<script th:inline="javascript">
    var scheduleId = [[${scheduleId}]];
    var instanceId = [[${instanceId}]];
    var app = angular.module('content-app', []);
    registerHttpInterceptor(app);
    app.controller('content-controller', function ($scope, $http, $timeout) {
        $scope.query = {
            id: scheduleId,
            pageNo: 1,
            pageSize: 10,
            instance: instanceId ? instanceId : ''
        };

        $scope.autoRefresh = {
            enabled: false,
            interval: null
        };

        $scope.onOpenList = function () {
            if (parent.xadmin) {
                parent.xadmin.add_tab('离线调度', 'schedule/list.html');
            } else {
                window.open('./list.html', '离线调度');
            }
        };

        $scope.init = function() {
            $scope.search();
        };

        $scope.previous = function () {
            if ($scope.instancePage.first) {
                return;
            }
            $scope.query.pageNo -= 1;
            $scope.search();
        };

        $scope.next = function () {
            if ($scope.instancePage.last) {
                return;
            }
            $scope.query.pageNo += 1;
            $scope.search();
        };

        $scope.search = function () {
            $http.post('./instance.api', $scope.query)
                .success(function (page) {
                    $scope.instancePage = page;
                    if (page.content.length) {
                        $scope.treeView(page.content[0]);
                    }
                });
        };

        $scope.treeView = function(item) {
            $('.instance-operate button').attr('disabled', 'disabled');
            $http.get('./treeview.api?id=' + scheduleId + '&instance=' + item)
                .success(function (tree) {
                    $scope.instance = item;
                    $timeout(function () {
                        $('#tree').treeview({
                            data: tree,
                            showBorder: false,
                            onNodeSelected: function (event, node) {
                                $scope.node = node;
                                $('#log').removeAttr('disabled');
                                if (node['rerunEnabled_']) {
                                    $('#rerun').removeAttr('disabled')
                                }
                                if (node['emptyEnabled_']) {
                                    $('#empty').removeAttr('disabled')
                                }
                            },
                            onNodeUnselected: function (event, node) {
                                $scope.node = null;
                                $('.instance-operate button').attr('disabled', 'disabled')
                            }
                        });
                        if (JSON.stringify(tree).indexOf('label-info') !== -1) {
                            if (!$scope.autoRefresh.enabled) {
                                $scope.onAutoRefresh();
                            }
                        }
                    }, 50);

                });
        };

        $scope.onAutoRefresh = function () {
            $scope.autoRefresh.enabled = !$scope.autoRefresh.enabled;
            if ($scope.instance && $scope.autoRefresh.enabled) {
                $scope.autoRefresh.interval = setInterval(function () {
                    $scope.treeView($scope.instance);
                }, 3000)
            } else {
                if ($scope.autoRefresh.interval) {
                    clearInterval($scope.autoRefresh.interval);
                }
            }
        };

        //执行日志
        $scope.onOpenLog = function() {
            if (parent.xadmin) {
                parent.xadmin.open('执行日志', 'script_history/list.html?scheduleId=' + scheduleId +
                    '&scheduleTopNodeId=' + $scope.node['nodeId_'] +
                    '&scheduleInstanceId=' + $scope.instance);
            } else {
                window.open('../script_history/list.html?scheduleId=' + scheduleId +
                    '&scheduleTopNodeId=' + $scope.node['nodeId_'] +
                    '&scheduleInstanceId=' + $scope.instance);
            }
        };

        $scope.onRerun = function() {
            swal({
                title: '确认重跑？',
                type: 'question',
                showConfirmButton: true,
                showCancelButton: true
            }).then(function (result) {
                if (result.value) {
                    $http.post('../script_history/rerun.api', {
                        scheduleId: $scope.node['scheduleId_'],
                        scheduleTopNodeId: $scope.node['nodeId_'],
                        scheduleInstanceId: $scope.instance
                    }).success(function () {
                        swal({
                            title: '操作成功',
                            type: 'success',
                            showConfirmButton: false,
                            timer: 1500
                        }).then(function () {
                            $scope.treeView($scope.instance);
                        });
                    })
                }
            });
        };

        $scope.onEmpty = function() {
            swal({
                title: '确认置成功？',
                type: 'question',
                showConfirmButton: true,
                showCancelButton: true
            }).then(function (result) {
                if (result.value) {
                    $http.post('../script_history/empty.api', {
                        scheduleId: $scope.node['scheduleId_'],
                        scheduleTopNodeId: $scope.node['nodeId_'],
                        scheduleInstanceId: $scope.instance
                    }).success(function () {
                        swal({
                            title: '操作成功',
                            type: 'success',
                            showConfirmButton: false,
                            timer: 1500
                        }).then(function () {
                            $scope.treeView($scope.instance);
                        });
                    })
                }
            });
        };

        $scope.init();

    });
</script>
</body>
</html>